<template>
	<!-- H5+APP端 -->
	<!-- #ifdef APP-PLUS || H5 -->
	<component :is="present" ref="comp"></component>
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<pageHome :style="[displayModule(0)]" />
	<!-- 会员模板 -->
	<pageVip :style="[displayModule(1)]" />
	<!-- 生态共建 -->
	<pageZoology :style="[displayModule(2)]" />
	<!-- 我的页面 -->
	<pageMine :style="[displayModule(3)]" />
	<!-- #endif -->
	<global-tabbar />
</template>

<script setup lang="ts">
import { markRaw, ref, shallowRef, watch } from 'vue';
import globalTabbar from '@/components/global-tabbar/index.vue';
import { vibrateShort } from '@/utils/function';
import { storeToRefs } from 'pinia';
import { useCommonStore } from '@/store/common';
// 首页
import pageHome from '@/pages/page/home/index.vue';
// 生态共建
import pageZoology from '@/pages/page/zoology/index.vue';
// 关于我们
import pageMine from '@/pages/page/mine/index.vue';
// 会员模板
import pageVip from '@/pages/page/vip/index.vue';
const commonStore = useCommonStore();
const { current } = storeToRefs(commonStore);
// #ifdef APP-PLUS || H5
// 设置动态组件
let present: any = shallowRef(pageHome);
const comp = ref(null);
const componentList = [markRaw(pageHome), markRaw(pageVip), markRaw(pageZoology), markRaw(pageMine)];
const init = () => {
	console.log('current', current.value);

	present.value = componentList[current.value];
};

init();

// #endif
// 监听是否发生改变
watch(
	() => current.value,
	(newValue) => {
		vibrateShort();
		// #ifdef APP-PLUS || H5
		present.value = componentList[newValue];
		// #endif
	}
);
// #ifdef MP-WEIXIN
// 是否隐藏
const displayModule = (index: number): any => {
	let style: any = {};
	if (current.value !== index) {
		style.display = 'none';
	}
	return style;
};
// #endif
</script>
<style lang="scss" scoped>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	align-items: center;
	justify-content: center;
}

.counter {
	font-size: 36rpx;
}

.operation {
	margin-top: 50rpx;
}
</style>
